<!--
 * @Author: zhang_wenjuan
 * @Date: 2021-05-19 08:46:02
 * @LastEditTime: 2021-07-14 16:34:59
 * @Description: 隐患列表
-->

<template>
    <div id="defectDetail_page">
        <!-- 顶部导航 -->
        <van-nav-bar title="隐患列表" left-arrow @click-left="back" fixed>
            <template slot="right">
                <div class="parent-circle">
                    <div class="child-circle"></div>
                </div>
            </template>
        </van-nav-bar>
        <!-- 查询条件 -->
        <div class="selectPart">
            <van-search style="position: relative;
				top: -10px;" v-model="searchData.subName" show-action clearable readonly disabled @click="selectSubShow"
                shape="round" background="#F5F6FA" placeholder="请选择变电站">
            </van-search>
            <!-- 选择隐患状态 -->
            <div class="topLine">
                <div class="left">
                    <span class="title">隐患状态：</span>
                    <span class="field" @click="showStatusPop = true">{{searchData.status}}</span>
                </div>
            </div>
            <div class="bottomLine">
                <span class="title">发现时间：</span>
                <span class="field" @click="showStartTime = true">{{searchData.startTime}}</span>
                <span class="zhi">——</span>
                <span class="field" @click="showEndTime = true">{{searchData.endTime}}</span>
            </div>
            <!-- 隐患状态下拉弹窗 -->
            <van-popup v-model="showStatusPop" position="bottom">
                <van-picker show-toolbar :columns="statusArr" @confirm="confirmStatus"
                    @cancel="showStatusPop = false" />
            </van-popup>
            <!-- 隐患性质下拉弹窗 -->
            <van-popup v-model="showXingzhiPop" position="bottom">
                <van-picker show-toolbar :columns="xingzhiArr" @confirm="confirmXingzhi"
                    @cancel="showXingzhiPop = false" />
            </van-popup>
            <!-- 发现时间下拉弹窗(开始) -->
            <van-popup v-model="showStartTime" position="bottom">
                <van-datetime-picker type="datetime" @confirm="confirmTime('start')" v-model="startTime2"
                    @cancel="showStartTime = false" />
            </van-popup>
            <!-- 发现时间下拉弹窗(结束) -->
            <van-popup v-model="showEndTime" position="bottom">
                <van-datetime-picker type="datetime" @confirm="confirmTime('end')" v-model="endTime2"
                    @cancel="showEndTime = false" />
            </van-popup>
        </div>
        <div class="kong"></div>
        <!-- 任务列表 -->
        <div class="listPart">
            <van-row style="margin: 10px 0px 0px 0px;" class="bg_4dbfae header search_header" type="flex"
                justify='space-around'>
                <van-col span="16">
                    <van-search v-model.trim="taskName" show-action clearable @click="focus" shape="round"
                        background="#F5F6FA" placeholder="请输入查询内容">
                    </van-search>
                </van-col>
                <van-col span="2" class="center_center" style='margin-top: 0.5rem;'>
                    <div class="radis-border">
                        <van-image class="imgSize" width="24" height="24" @click="rfidBtn" :src="icon.rfid" />
                    </div>
                </van-col>
                <van-col span="2" class="center_center" style='margin-top: 0.5rem;'>
                    <div class="radis-border">
                        <van-image class="imgSize" width="24" height="24" @click="scanBtn" :src="icon.scan" />
                    </div>
                </van-col>
                <van-col span="2" class="center_center" style='margin-top: 0.5rem;' @click="addBtn">
                    <div class="radis-border">
                        <van-image class="imgSize" width="24" height="24" :src="icon.add" />
                    </div>
                </van-col>
            </van-row>
            <div class="defectItem" v-for="(item,i) of defectList" :key="i" @click="toDetail">
                <!-- 左侧图片区域 -->
                <!-- 右侧文字区域 -->
                <div class="rightPart">
                    <div class="topPart">
                        <div v-if="item.hazardStatus=='0'" class="status red">隐患登记</div>
                        <div v-if="item.hazardStatus=='1'" class="status blue">审核</div>
                        <div v-if="item.hazardStatus=='2'" class="status orange">隐患处理</div>
                        <div v-if="item.hazardStatus=='3'" class="status green">消除确认</div>
                        <div v-if="item.hazardStatus=='4'" class="status grey">结束</div>
                    </div>
                    <div class="describ">{{item.hazardDescription}}</div>
                    <div class="timePart">
                        <div>发现时间：<span class="val333">{{item.discoveryDate|filterTime}}</span></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 反馈组件 选择变电站-->
        <van-popup class="selSub" round v-model="showSubStation" position="top">
            <selSubstation @close="onClose" @selected="selSubstationBtn">
            </selSubstation>
        </van-popup>
    </div>
</template>
<script type="text/javascript">
    import Utils from '@/utils/util'
    import selSubstation from "@/components/SelectSubstation"
    import { getHazardList } from "../../api/hideDanger"
    export default {
        name: "defectList",
        components: {
            selSubstation
        },
        data() {
            return {
                defectList: [
                    {}, {}, {}, {}
                ],
                // 筛选条件
                showSubStation: false,// 显示选择变电站弹窗
                searchData: {
                    subName: "请选择站点",
                    subId: "",
                    status: "",
                    defectNature: "",
                    // startTime: Utils.DateUtil.getFormatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
                    // endTime: Utils.DateUtil.getFormatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
                    // startTime: new Date(),
                    // endTime: new Date(),
                    startTime: '',
                    endTime: '',
                },
                // 隐患状态
                status: "",
                //是否展示隐患状态
                showStatusPop: false,
                //是否展示隐患性质
                showXingzhiPop: false,
                // 隐患状态下拉数组
                statusArr: ["全部", "未消除", "已消除"],
                // 隐患性质下拉数组
                xingzhiArr: ["全部", "一般", "严重"],
                //是否展示开始时间
                showStartTime: false,
                //是否展示结束时间
                showEndTime: false,
                // 开始时间
                startTime1: "",
                startTime2: "",
                // 结束时间
                endTime1: "",
                endTime2: "",
                icon: {
                    filetour: require('../../../../assets/img/mainIndex/filetour.png'),
                    rfid: require('../../../../assets/img/mainIndex/rfid.png'),
                    scan: require('../../../../assets/img/mainIndex/scan.png'),
                    add: require('../../../../assets/img/mainIndex/add.png'),
                    up: require('../../../../assets/img/mainIndex/up.png'),
                    filter: require('../../../../assets/img/mainIndex/filter.png')
                },
                taskName: ""
            }
        },
        created() {
            // 获取隐患列表
            this.getDefectList()
        },
        mounted() {

        },
        methods: {

            focus() {

            },
            /**
             * @description: 返回
             */
            back() {

            },

            /**
             * @description: 获取隐患列表
             */
            getDefectList() {
                var self = this
                this.$toast.loading({
                    duration: 0,//展示时长 0不会消失
                    message: "正在获取...",
                    forbidClick: true,//是否禁止背景点击
                    overlay: true//是否显示背景遮罩层
                })
                self.defectList = []
                var params = {
                    "endTime": this.searchData.endTime,//结束时间
                    "hazardDescription": this.taskName,// 关键字
                    "hazardStatus": this.searchData.status,// 隐患状态
                    "pageNum": 1,
                    "pageSize": 20,
                    "roleCode": "",//用户角色
                    "startTime": this.searchData.startTime,//开始时间
                    "substationId": this.searchData.subId,//变电站id
                    "userId": "915142429"//用户id(必传)
                }
                console.log(JSON.stringify(params));
                getHazardList(params).then(function (res) {
                    console.log(res);
                    self.$toast.clear()
                    if (res.success) {
                        self.defectList = res.data
                        // self.defectList.forEach(v => {
                        //     v.findTime= Utils.DateUtil.getFormatDateByLong(v.discoveryDate, 'yyyy-MM-dd')
                        // });
                        console.log(self.defectList);
                    }
                }).catch(err => {
                    self.$toast.clear()
                });
            },

            /**
             * @description: 新增隐患
             */
            AddHiddenDanger() {
                this.$router.push({
                    name: "AddHiddenDanger"
                })
            },

            selectSubShow() {
                console.log(222222);
                this.showSubStation = true
            },

            //变电站选中回调
            selSubstationBtn(sub) {
                console.log(1111);
                this.showSubStation = false;
                this.searchData.subId = sub.substationId;
                this.searchData.subName = sub.substationName;
                this.getDefectList();
            },

            /**
            * @description: 关闭变电站
            */
            onClose() {
                this.showSubStation = false;
            },

            /**
             * @description: 确认选择隐患状态
             * @param {String} val 隐患状态
             */
            confirmStatus(val) {
                console.log(val)
                console.log("隐患状态")
                this.searchData.status = val
                this.showStatusPop = false
            },

            /**
             * @description: 确认选择隐患性质
             * @param {String} val 隐患状态
             */
            confirmXingzhi(val) {
                console.log(val)
                console.log("隐患性质")
                this.searchData.defectNature = val
                this.showXingzhiPop = false
            },

            /**
             * @description: 确认选择时间
             * @param {String} type 确认类型
             */
            confirmTime(type) {
                if (type == "start") {
                    console.log(this.searchData.startTime)
                    this.showStartTime = false
                    this.searchData.startTime = Utils.DateUtil.getFormatDateByLong(this.startTime2, 'yyyy-MM-dd hh:mm:ss')
                } else {
                    console.log(this.searchData.endTime)
                    if (this.startTime2 > this.endTime2) {
                        this.$toast("发现结束时间不能早于开始时间！")
                    } else {
                        this.showEndTime = false
                        this.searchData.endTime = Utils.DateUtil.getFormatDateByLong(this.endTime2, 'yyyy-MM-dd hh:mm:ss')
                    }
                }
            },

            /**
             * @description: 跳转至隐患详情
             * @param {Object} item 当前点击的隐患
             */
            toDetail(item) {
                console.log(item)
                this.$router.push({
                    name: "HiddenDangerDetail"
                })
            },
            focus() { },
            rfidBtn() { },
            scanBtn() { },
            addBtn() {
                console.log(1111);
                this.$router.push({
                    name: "AddHiddenDanger"
                })
            },
        },
        watch: {
            taskList() {

            }
        },
        filters: {
            filterTime(val) {
                return Utils.DateUtil.getFormatDateByLong(val, 'yyyy-MM-dd')
            }
        }
    }
</script>
<style scoped>
    #defectDetail_page {
        background-color: rgba(250, 250, 250, 1);
    }

    .van-search__content--round {
        background: white !important;
        color: #E6E6E6 !important;
    }

    .van-search {
        border-radius: 25px !important;
        background-color: #fff !important;
        border: 1px solid #e5e5e5 !important;
        height: 2.5rem !important;
    }

    .tc-keyword-wrapper {
        margin: 5px 0;
    }

    .van-nav-bar {
        background: #17b49b;
    }

    .van-nav-bar /deep/ .van-icon {
        color: #fff;
        font-size: 22px;
    }

    .scan {
        margin: 0 10px;
    }

    .van-nav-bar /deep/ .van-nav-bar__title {
        color: #fff;
        font-size: 18px;
    }

    .van-nav-bar /deep/ .van-button {
        margin-right: 10px;
    }

    /* 筛选区域 */
    .selectPart {
        width: 100%;
        padding: 20px;
        background-color: rgba(250, 250, 250, 1);
        font-size: 12px;
        color: #666;
        position: fixed;
        top: 46px;
        left: 0;
        box-sizing: border-box;
        padding-bottom: 0px;
    }

    .selectPart .topLine {
        display: flex;
        justify-content: space-between;
    }

    .selectPart .topLine .left,
    .selectPart .topLine .right {
        width: 100%;
        display: flex;
    }

    .selectPart .topLine .left {
        margin-right: 20px;
    }

    .selectPart .title {
        display: inline-block;
        width: 70px;
        height: 30px;
        line-height: 30px;
    }

    .selectPart .topLine .field {
        border: 1px solid #eee;
        display: inline-block;
        width: calc(100% - 70px);
        height: 30px;
        line-height: 30px;
        /* text-align: right; */
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 25px;
        background-color: #fff;
    }

    .selectPart .bottomLine {
        display: flex;
        margin-top: 10px;
    }

    .selectPart .bottomLine .field {
        height: 30px;
        line-height: 30px;
        border: 1px solid #eee;
        text-align: center;
        border-radius: 25px;
        padding: 0 10px;
        width: 29%;
        background-color: #fff;
    }

    .selectPart .bottomLine .zhi {
        height: 30px;
        line-height: 30px;
        margin: 0 10px;
    }

    .kong {
        width: 100%;
        height: 190px;
    }

    /* 任务列表 */
    .listPart {
        padding: 0 10px 10px;
        height: 39rem;
        overflow-y: auto;
        width: 90%;
        margin: 0 auto;
        background-color: #fff !important;
    }

    .defectItem {
        height: 80px;
        background: #fafafa;
        margin-bottom: 10px;
        border-radius: 5px;
        padding: 15px;
        color: #8f8f94;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        margin-top: 1rem;
    }

    .defectItem .leftPart {
        width: 100px;
        height: 100px;
        border: 1px solid #eee;
        margin-right: 20px;
    }

    .defectItem .rightPart {
        width: 100%;
    }

    .defectItem .rightPart .topPart {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .defectItem .rightPart .topPart .status.red {
        background: #eb3b3b;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.blue {
        background: #1481ee;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.orange {
        background: orange;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.grey {
        background: green;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .topPart .status.green {
        background: #ccc;
        color: #fff;
        border-radius: 4px;
        padding: 2px 8px;
    }

    .defectItem .rightPart .describ {
        margin: 5px 0;
        color: #333;
    }

    .defectItem .rightPart .val333 {
        color: #333;
    }

    .selectPart /deep/ .van-col--16 {
        margin-right: 20px;
    }

    .selectPart /deep/ .van-col--2 {
        padding-top: 7px;
    }

    .van-search__action {
        display: none;
    }

    .van-icon-search::before {
        content: '\F0AF';
        font-size: 1.5rem;
        color: #999999;
    }
</style>